<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <!-- App Favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App title -->
        <title>Adminto - Responsive Admin Dashboard Template</title>

        <!-- App CSS -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/core.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/components.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/menu.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />

        <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->

        <script src="assets/js/modernizr.min.js"></script>

    </head>


    <body class="fixed-left">

        <!-- Begin page -->
        <div id="wrapper">

            <!-- Top Bar Start -->
            <div class="topbar">

                <!-- LOGO -->
                <div class="topbar-left">
                    <a href="index.html" class="logo"><span>Admin<span>to</span></span><i class="zmdi zmdi-layers"></i></a>
                </div>

                <!-- Button mobile view to collapse sidebar menu -->
                <div class="navbar navbar-default" role="navigation">
                    <div class="container">

                        <!-- Page title -->
                        <ul class="nav navbar-nav navbar-left">
                            <li>
                                <button class="button-menu-mobile open-left">
                                    <i class="zmdi zmdi-menu"></i>
                                </button>
                            </li>
                            <li>
                                <h4 class="page-title">Components</h4>
                            </li>
                        </ul>

                        <!-- Right(Notification and Searchbox -->
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <!-- Notification -->
                                <div class="notification-box">
                                    <ul class="list-inline m-b-0">
                                        <li>
                                            <a href="javascript:void(0);" class="right-bar-toggle">
                                                <i class="zmdi zmdi-notifications-none"></i>
                                            </a>
                                            <div class="noti-dot">
                                                <span class="dot"></span>
                                                <span class="pulse"></span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <!-- End Notification bar -->
                            </li>
                            <li class="hidden-xs">
                                <form role="search" class="app-search">
                                    <input type="text" placeholder="Search..."
                                           class="form-control">
                                    <a href=""><i class="fa fa-search"></i></a>
                                </form>
                            </li>
                        </ul>

                    </div><!-- end container -->
                </div><!-- end navbar -->
            </div>
            <!-- Top Bar End -->


            <!-- ========== Left Sidebar Start ========== -->
            <div class="left side-menu">
                <div class="sidebar-inner slimscrollleft">

                    <!-- User -->
                    <div class="user-box">
                        <div class="user-img">
                            <img src="assets/images/users/avatar-1.jpg" alt="user-img" title="Mat Helme" class="img-circle img-thumbnail img-responsive">
                            <div class="user-status offline"><i class="zmdi zmdi-dot-circle"></i></div>
                        </div>
                        <h5><a href="#">Mat Helme</a> </h5>
                        <ul class="list-inline">
                            <li>
                                <a href="#" >
                                    <i class="zmdi zmdi-settings"></i>
                                </a>
                            </li>

                            <li>
                                <a href="#" class="text-custom">
                                    <i class="zmdi zmdi-power"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- End User -->

                    <!--- Sidemenu -->
                    <div id="sidebar-menu">
                        <ul>
                            <li class="text-muted menu-title">Navigation</li>

                            <li>
                                <a href="index.html" class="waves-effect"><i class="zmdi zmdi-view-dashboard"></i> <span> Dashboard </span> </a>
                            </li>

                            <li>
                                <a href="typography.html" class="waves-effect"><i class="zmdi zmdi-format-underlined"></i> <span> Typography </span> </a>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="zmdi zmdi-invert-colors"></i> <span> User Interface </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="ui-buttons.html">Buttons</a></li>
                                    <li><a href="ui-cards.html">Cards</a></li>
                                    <li><a href="ui-draggable-cards.html">Draggable Cards</a></li>
                                    <li><a href="ui-checkbox-radio.html">Checkboxs-Radios</a></li>
                                    <li><a href="ui-material-icons.html">Material Design Icons</a></li>
                                    <li><a href="ui-font-awesome-icons.html">Font Awesome</a></li>
                                    <li><a href="ui-dripicons.html">Dripicons</a></li>
                                    <li><a href="ui-themify-icons.html">Themify Icons</a></li>
                                    <li><a href="ui-modals.html">Modals</a></li>
                                    <li><a href="ui-notification.html">Notification</a></li>
                                    <li><a href="ui-range-slider.html">Range Slider</a></li>
                                    <li><a href="ui-components.html">Components</a>
                                    <li><a href="ui-sweetalert.html">Sweet Alert</a>
                                    <li><a href="ui-treeview.html">Tree view</a>
                                    <li><a href="ui-widgets.html">Widgets</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="zmdi zmdi-collection-text"></i><span class="label label-warning pull-right">7</span><span> Forms </span> </a>
                                <ul class="list-unstyled">
                                    <li><a href="form-elements.html">General Elements</a></li>
                                    <li><a href="form-advanced.html">Advanced Form</a></li>
                                    <li><a href="form-validation.html">Form Validation</a></li>
                                    <li><a href="form-wizard.html">Form Wizard</a></li>
                                    <li><a href="form-fileupload.html">Form Uploads</a></li>
                                    <li><a href="form-wysiwig.html">Wysiwig Editors</a></li>
                                    <li><a href="form-xeditable.html">X-editable</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="zmdi zmdi-view-list"></i> <span> Tables </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="tables-basic.html">Basic Tables</a></li>
                                    <li><a href="tables-datatable.html">Data Table</a></li>
                                    <li><a href="tables-responsive.html">Responsive Table</a></li>
                                    <li><a href="tables-editable.html">Editable Table</a></li>
                                    <li><a href="tables-tablesaw.html">Tablesaw Table</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="zmdi zmdi-chart"></i><span> Charts </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="chart-flot.html">Flot Chart</a></li>
                                    <li><a href="chart-morris.html">Morris Chart</a></li>
                                    <li><a href="chart-chartist.html">Chartist Charts</a></li>
                                    <li><a href="chart-chartjs.html">Chartjs Chart</a></li>
                                    <li><a href="chart-other.html">Other Chart</a></li>
                                </ul>
                            </li>

                            <li>
                                <a href="calendar.html" class="waves-effect"><i class="zmdi zmdi-calendar"></i><span> Calendar </span></a>
                            </li>

                            <li>
                                <a href="inbox.html" class="waves-effect"><i class="zmdi zmdi-email"></i><span class="label label-purple pull-right">New</span><span> Mail </span></a>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="zmdi zmdi-collection-item"></i><span> Pages </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="page-starter.html">Starter Page</a></li>
                                    <li><a href="page-login.html">Login</a></li>
                                    <li><a href="page-register.html">Register</a></li>
                                    <li><a href="page-recoverpw.html">Recover Password</a></li>
                                    <li><a href="page-lock-screen.html">Lock Screen</a></li>
                                    <li><a href="page-confirm-mail.html">Confirm Mail</a></li>
                                    <li><a href="page-404.html">Error 404</a></li>
                                    <li><a href="page-500.html">Error 500</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class="waves-effect"><i class="zmdi zmdi-layers"></i><span>Extra Pages </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="extras-projects.html">Projects</a></li>
                                    <li><a href="extras-tour.html">Tour</a></li>
                                    <li><a href="extras-taskboard.html">Taskboard</a></li>
                                    <li><a href="extras-taskdetail.html">Task Detail</a></li>
                                    <li><a href="extras-profile.html">Profile</a></li>
                                    <li><a href="extras-maps.html">Maps</a></li>
                                    <li><a href="extras-contact.html">Contact list</a></li>
                                    <li><a href="extras-pricing.html">Pricing</a></li>
                                    <li><a href="extras-timeline.html">Timeline</a></li>
                                    <li><a href="extras-invoice.html">Invoice</a></li>
                                    <li><a href="extras-faq.html">FAQ</a></li>
                                    <li><a href="extras-gallery.html">Gallery</a></li>
                                    <li><a href="extras-email-template.html">Email template</a></li>
                                    <li><a href="extras-maintenance.html">Maintenance</a></li>
                                    <li><a href="extras-comingsoon.html">Coming soon</a></li>
                                </ul>
                            </li>

                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <!-- Sidebar -->
                    <div class="clearfix"></div>

                </div>

            </div>
            <!-- Left Sidebar End -->



            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->
            <div class="content-page">
                <!-- Start content -->
                <div class="content">
                    <div class="container">

                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box">
                                    <div class="dropdown pull-right">
                                        <a href="#" class="dropdown-toggle card-drop" data-toggle="dropdown" aria-expanded="false">
                                            <i class="zmdi zmdi-more-vert"></i>
                                        </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>

                        			<h4 class="header-title m-t-0 m-b-30">Dropdowns</h4>

                                    <div class="row">
                                        <div class="col-lg-3 col-sm-6">
                                            <div class="bg-muted text-center p-30">
                                                <h5 class="m-b-30 m-t-0">Example</h5>
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
                                                    <ul class="dropdown-menu demo-dropdown" role="menu">
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li><a href="#">Separated link</a></li>
                                                    </ul>
                                                </div>

                                                <!-- Demo only -->
                                                <div class="hidden-xs" style="height: 18px;"></div>
                                            </div>
                                        </div>

                                        <div class="col-lg-3 col-sm-6">
                                            <div class="bg-muted text-center p-30">
                                                <h5 class="m-b-30 m-t-0">Headers</h5>
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
                                                    <ul class="dropdown-menu demo-dropdown">
                                                        <li class="dropdown-header">Dropdown header</li>
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li class="dropdown-header">Dropdown header</li>
                                                    </ul>
                                                </div>

                                                <!-- Demo only -->
                                                <div class="hidden-xs" style="height: 4px;"></div>

                                            </div>
                                        </div>

                                        <div class="col-lg-3 col-sm-6">
                                            <div class="bg-muted text-center p-30">
                                                <h5 class="m-b-30 m-t-0">Divider</h5>
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
                                                    <ul class="dropdown-menu demo-dropdown">
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li role="separator" class="divider"></li>
                                                        <li><a href="#">Separated link</a></li>
                                                    </ul>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="col-lg-3 col-sm-6">
                                            <div class="bg-muted text-center p-30">
                                                <h5 class="m-b-30 m-t-0">Disabled menu items</h5>
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
                                                    <ul class="dropdown-menu demo-dropdown" aria-labelledby="dropdownMenu4">
                                                        <li><a href="#">Regular link</a></li>
                                                        <li class="disabled"><a href="#">Disabled link</a></li>
                                                        <li><a href="#">Another link</a></li>
                                                    </ul>
                                                </div>

                                                <!-- Demo only -->
                                                <div class="hidden-xs" style="height: 19px;"></div>
                                            </div>
                                        </div>

                                    </div>
                                    <!-- end row -->


                                    <div class="row m-t-20">
                                        <div class="col-md-6">
                                            <h5 class="m-t-20">Examples</h5>

                                            <div class="">
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li><a href="#">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-info dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></button>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li><a href="#">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                                <div class="btn-group dropdown">
                                                    <button type="button" class="btn btn-success waves-effect waves-light">Dropddown</button>
                                                    <button type="button" class="btn btn-success dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false"><i class="caret"></i></button>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li><a href="#">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                                <div class="btn-group dropdown">
                                                    <button type="button" class="btn btn-primary waves-effect waves-light">Dropddown</button>
                                                    <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false"><i class="caret"></i></button>
                                                    <ul class="dropdown-menu" role="menu">
                                                        <li><a href="#">Action</a></li>
                                                        <li><a href="#">Another action</a></li>
                                                        <li><a href="#">Something else here</a></li>
                                                        <li class="divider"></li>
                                                        <li><a href="#">Separated link</a></li>
                                                    </ul>
                                                </div>
                                            </div>

                                        </div>


                                        <div class="col-md-6">
                                            <h5 class="m-t-20">Dropup</h5>

                                            <div class="btn-group dropup">
                                                <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <span class="caret"></span></button>
                                                <ul class="dropdown-menu" role="menu">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div>
                                            <div class="btn-group dropup">
                                                <button type="button" class="btn btn-warning dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <span class="caret"></span></button>
                                                <ul class="dropdown-menu" role="menu">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div>
                                            <div class="btn-group dropup">
                                                <button type="button" class="btn btn-success dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <span class="caret"></span></button>
                                                <ul class="dropdown-menu" role="menu">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div>
                                            <div class="btn-group dropup">
                                                <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Dropdup <span class="caret"></span></button>
                                                <ul class="dropdown-menu" role="menu">
                                                    <li><a href="#">Action</a></li>
                                                    <li><a href="#">Another action</a></li>
                                                    <li><a href="#">Something else here</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="#">Separated link</a></li>
                                                </ul>
                                            </div>


                                        </div>

                                    </div>
                                    <!-- end row -->

                                </div>
                            </div><!-- end col -->
                        </div>
                        <!-- end row -->


                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box">
                                    <div class="dropdown pull-right">
                                        <a href="#" class="dropdown-toggle card-drop" data-toggle="dropdown" aria-expanded="false">
                                            <i class="zmdi zmdi-more-vert"></i>
                                        </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>

                        			<h4 class="header-title m-t-0 m-b-30">Tabs</h4>

                                    <div class="row">
                                        <div class="col-lg-6">

                                            <ul class="nav nav-tabs">
                                                <li role="presentation" class="active">
                                                    <a href="#home1" role="tab" data-toggle="tab">Home</a>
                                                </li>
                                                <li role="presentation">
                                                    <a href="#profile1" role="tab" data-toggle="tab">Profile</a>
                                                </li>
                                                <li role="presentation" class="dropdown">
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                        Dropdown <span class="caret"></span>
                                                    </a>
                                                    <ul class="dropdown-menu">
                                                        <li>
                                                            <a href="#dropdown11" role="tab"
                                                               data-toggle="tab">@fat</a>
                                                        </li>
                                                        <li>
                                                            <a href="#dropdown21" role="tab"
                                                               data-toggle="tab">@mdo</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                            <div class="tab-content">
                                                <div role="tabpanel" class="tab-pane fade in active" id="home1">
                                                    <p>Raw denim you probably haven't heard
                                                    of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro
                                                    synth master cleanse. Mustache cliche tempor, williamsburg carles
                                                    vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher
                                                    synth. Cosby sweater eu banh mi, qui irure terry richardson ex
                                                    squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis
                                                    cardigan american apparel, butcher voluptate nisi qui.</p>
                                                </div>
                                                <div role="tabpanel" class="tab-pane fade" id="profile1"><p>Food truck fixie locavore,
                                                    accusamus mcsweeney's marfa nulla single-origin coffee squid.
                                                    Exercitation +1 labore velit, blog sartorial PBR leggings next level
                                                    wes anderson artisan four loko farm-to-table craft beer twee. Qui
                                                    photo booth letterpress, commodo enim craft beer mlkshk aliquip jean
                                                    shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda
                                                    labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
                                                    yr, vero magna velit sapiente labore stumptown. Vegan fanny pack
                                                    odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY
                                                    ethical culpa terry richardson biodiesel. Art party scenester
                                                    stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed
                                                    echo park.</p>
                                                </div>
                                                <div role="tabpanel" class="tab-pane fade" id="dropdown11">
                                                    <p>Etsy mixtape wayfarers, ethical
                                                    wes anderson tofu before they sold out mcsweeney's organic lomo
                                                    retro fanny pack lo-fi farm-to-table readymade. Messenger bag
                                                    gentrify pitchfork tattooed craft beer, iphone skateboard locavore
                                                    carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy
                                                    irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg
                                                    banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy
                                                    retro mlkshk vice blog. Scenester cred you probably haven't heard of
                                                    them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu
                                                    synth chambray yr.</p>
                                                </div>
                                                <div role="tabpanel" class="tab-pane fade" id="dropdown21">
                                                    <p>Trust fund seitan letterpress,
                                                    keytar raw denim keffiyeh etsy art party before they sold out master
                                                    cleanse gluten-free squid scenester freegan cosby sweater. Fanny
                                                    pack portland seitan DIY, art party locavore wolf cliche high life
                                                    echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before
                                                    they sold out farm-to-table VHS viral locavore cosby sweater. Lomo
                                                    wolf viral, mustache readymade thundercats keffiyeh craft beer marfa
                                                    ethical. Wolf salvia freegan, sartorial keffiyeh echo park
                                                    vegan.</p>
                                                </div>
                                            </div>
                                        </div><!-- end col -->


                                        <div class="col-lg-6">

                                            <ul class="nav nav-tabs nav-justified">
                                                <li role="presentation" class="active">
                                                    <a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home"aria-expanded="true">Home</a>
                                                </li>
                                                <li role="presentation">
                                                    <a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a>
                                                </li>
                                                <li role="presentation" class="dropdown">
                                                    <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">
                                                        Dropdown <span class="caret"></span>
                                                    </a>
                                                    <ul class="dropdown-menu" aria-labelledby="myTabDrop1"
                                                        id="myTabDrop1-contents">
                                                        <li>
                                                            <a href="#dropdown1" role="tab" id="dropdown1-tab"
                                                               data-toggle="tab" aria-controls="dropdown1">@fat</a>
                                                        </li>
                                                        <li>
                                                            <a href="#dropdown2" role="tab" id="dropdown2-tab"
                                                               data-toggle="tab" aria-controls="dropdown2">@mdo</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                            <div class="tab-content">
                                                <div role="tabpanel" class="tab-pane fade in active" id="home"
                                                     aria-labelledby="home-tab"><p>Raw denim you probably haven't heard
                                                    of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro
                                                    synth master cleanse. Mustache cliche tempor, williamsburg carles
                                                    vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher
                                                    synth. Cosby sweater eu banh mi, qui irure terry richardson ex
                                                    squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis
                                                    cardigan american apparel, butcher voluptate nisi qui.</p></div>
                                                <div role="tabpanel" class="tab-pane fade" id="profile"
                                                     aria-labelledby="profile-tab"><p>Food truck fixie locavore,
                                                    accusamus mcsweeney's marfa nulla single-origin coffee squid.
                                                    Exercitation +1 labore velit, blog sartorial PBR leggings next level
                                                    wes anderson artisan four loko farm-to-table craft beer twee. Qui
                                                    photo booth letterpress, commodo enim craft beer mlkshk aliquip jean
                                                    shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda
                                                    labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
                                                    yr, vero magna velit sapiente labore stumptown. Vegan fanny pack
                                                    odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY
                                                    ethical culpa terry richardson biodiesel. Art party scenester
                                                    stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed
                                                    echo park.</p></div>
                                                <div role="tabpanel" class="tab-pane fade" id="dropdown1"
                                                     aria-labelledby="dropdown1-tab"><p>Etsy mixtape wayfarers, ethical
                                                    wes anderson tofu before they sold out mcsweeney's organic lomo
                                                    retro fanny pack lo-fi farm-to-table readymade. Messenger bag
                                                    gentrify pitchfork tattooed craft beer, iphone skateboard locavore
                                                    carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy
                                                    irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg
                                                    banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy
                                                    retro mlkshk vice blog. Scenester cred you probably haven't heard of
                                                    them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu
                                                    synth chambray yr.</p></div>
                                                <div role="tabpanel" class="tab-pane fade" id="dropdown2"
                                                     aria-labelledby="dropdown2-tab"><p>Trust fund seitan letterpress,
                                                    keytar raw denim keffiyeh etsy art party before they sold out master
                                                    cleanse gluten-free squid scenester freegan cosby sweater. Fanny
                                                    pack portland seitan DIY, art party locavore wolf cliche high life
                                                    echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before
                                                    they sold out farm-to-table VHS viral locavore cosby sweater. Lomo
                                                    wolf viral, mustache readymade thundercats keffiyeh craft beer marfa
                                                    ethical. Wolf salvia freegan, sartorial keffiyeh echo park
                                                    vegan.</p></div>
                                            </div>
                                        </div><!-- end col -->

                                    </div>
                                    <!-- end row -->

                                </div>
                            </div><!-- end col -->
                        </div>
                        <!-- end row -->




                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box">
                                    <div class="dropdown pull-right">
                                        <a href="#" class="dropdown-toggle card-drop" data-toggle="dropdown" aria-expanded="false">
                                            <i class="zmdi zmdi-more-vert"></i>
                                        </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>

                        			<h4 class="header-title m-t-0 m-b-30">Accordions</h4>

                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="p-b-10">
                                                <p><a class="btn btn-primary waves-effect waves-light" role="button" data-toggle="collapse"
                                                      href="#collapseExample" aria-expanded="false"
                                                      aria-controls="collapseExample"> Link with href </a>
                                                    <button class="btn btn-primary waves-effect waves-light" type="button" data-toggle="collapse"
                                                            data-target="#collapseExample" aria-expanded="false"
                                                            aria-controls="collapseExample"> Button with data-target
                                                    </button>
                                                </p>
                                                <div class="collapse in" id="collapseExample">
                                                    <div class="well"> Anim pariatur cliche reprehenderit, enim eiusmod
                                                        high life accusamus terry richardson ad squid. Nihil anim
                                                        keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
                                                        sapiente ea proident.
                                                    </div>
                                                </div>
                                            </div>
                                        </div><!-- end col -->


                                        <div class="col-lg-6">
                                            <div class="panel-group" id="accordion" role="tablist"
                                                 aria-multiselectable="true">
                                                <div class="panel panel-default bx-shadow-none">
                                                    <div class="panel-heading" role="tab" id="headingOne">
                                                        <h4 class="panel-title">
                                                            <a role="button" data-toggle="collapse"
                                                               data-parent="#accordion" href="#collapseOne"
                                                               aria-expanded="true" aria-controls="collapseOne">
                                                                Collapsible Group Item #1
                                                            </a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapseOne" class="panel-collapse collapse in"
                                                         role="tabpanel" aria-labelledby="headingOne">
                                                        <div class="panel-body">
                                                            Anim pariatur cliche reprehenderit, enim eiusmod high life
                                                            accusamus terry richardson ad squid. 3 wolf moon officia
                                                            aute, non cupidatat skateboard dolor brunch. Food truck
                                                            quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
                                                            sunt aliqua put a bird on it squid single-origin coffee
                                                            nulla assumenda shoreditch et. Nihil anim keffiyeh
                                                            helvetica, craft beer labore wes anderson cred nesciunt
                                                            sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                                                            Leggings occaecat craft beer farm-to-table, raw denim
                                                            aesthetic synth nesciunt you probably haven't heard of them
                                                            accusamus labore sustainable VHS.
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default bx-shadow-none">
                                                    <div class="panel-heading" role="tab" id="headingTwo">
                                                        <h4 class="panel-title">
                                                            <a class="collapsed" role="button" data-toggle="collapse"
                                                               data-parent="#accordion" href="#collapseTwo"
                                                               aria-expanded="false" aria-controls="collapseTwo">
                                                                Collapsible Group Item #2
                                                            </a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapseTwo" class="panel-collapse collapse"
                                                         role="tabpanel" aria-labelledby="headingTwo">
                                                        <div class="panel-body">
                                                            Anim pariatur cliche reprehenderit, enim eiusmod high life
                                                            accusamus terry richardson ad squid. 3 wolf moon officia
                                                            aute, non cupidatat skateboard dolor brunch. Food truck
                                                            quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
                                                            sunt aliqua put a bird on it squid single-origin coffee
                                                            nulla assumenda shoreditch et. Nihil anim keffiyeh
                                                            helvetica, craft beer labore wes anderson cred nesciunt
                                                            sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                                                            Leggings occaecat craft beer farm-to-table, raw denim
                                                            aesthetic synth nesciunt you probably haven't heard of them
                                                            accusamus labore sustainable VHS.
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="panel panel-default bx-shadow-none">
                                                    <div class="panel-heading" role="tab" id="headingThree">
                                                        <h4 class="panel-title">
                                                            <a class="collapsed" role="button" data-toggle="collapse"
                                                               data-parent="#accordion" href="#collapseThree"
                                                               aria-expanded="false" aria-controls="collapseThree">
                                                                Collapsible Group Item #3
                                                            </a>
                                                        </h4>
                                                    </div>
                                                    <div id="collapseThree" class="panel-collapse collapse"
                                                         role="tabpanel" aria-labelledby="headingThree">
                                                        <div class="panel-body">
                                                            Anim pariatur cliche reprehenderit, enim eiusmod high life
                                                            accusamus terry richardson ad squid. 3 wolf moon officia
                                                            aute, non cupidatat skateboard dolor brunch. Food truck
                                                            quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
                                                            sunt aliqua put a bird on it squid single-origin coffee
                                                            nulla assumenda shoreditch et. Nihil anim keffiyeh
                                                            helvetica, craft beer labore wes anderson cred nesciunt
                                                            sapiente ea proident. Ad vegan excepteur butcher vice lomo.
                                                            Leggings occaecat craft beer farm-to-table, raw denim
                                                            aesthetic synth nesciunt you probably haven't heard of them
                                                            accusamus labore sustainable VHS.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div><!-- end col -->

                                    </div><!-- end row -->

                                </div>
                            </div><!-- end col -->
                        </div>
                        <!-- end row -->


                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box">

                                    <div class="dropdown pull-right">
                                        <a href="#" class="dropdown-toggle card-drop" data-toggle="dropdown" aria-expanded="false">
                                            <i class="zmdi zmdi-more-vert"></i>
                                        </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>

                        			<h4 class="header-title m-t-0 m-b-30">Progress Bars</h4>

                                    <div class="row">
                                        <div class="col-md-5">
                                            <h5 class="m-t-0">Colors examples</h5>

                                            <div class="progress">
	                                            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	                                                <span class="sr-only">60% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress">
	                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
	                                                <span class="sr-only">48% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress">
	                                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
	                                                <span class="sr-only">82% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress">
	                                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
	                                                <span class="sr-only">95% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress">
	                                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	                                                <span class="sr-only">60% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress">
	                                            <div class="progress-bar progress-bar-pink" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
	                                                <span class="sr-only">48% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress">
	                                            <div class="progress-bar progress-bar-purple" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
	                                                <span class="sr-only">82% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress m-b-5">
	                                            <div class="progress-bar progress-bar-inverse" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
	                                                <span class="sr-only">95% Complete</span>
	                                            </div>
	                                        </div>

                                        </div><!-- end col -->

                                        <div class="col-md-5 col-md-offset-1">
                                            <h5 class="m-t-0">Custom Examples</h5>

                                            <div class="progress progress-bar-primary-alt">
	                                            <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	                                                <span class="sr-only">60% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress progress-bar-success-alt">
	                                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
	                                                <span class="sr-only">48% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress progress-bar-info-alt">
	                                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
	                                                <span class="sr-only">82% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress progress-bar-warning-alt">
	                                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
	                                                <span class="sr-only">95% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress progress-bar-danger-alt">
	                                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	                                                <span class="sr-only">60% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress progress-bar-pink-alt">
	                                            <div class="progress-bar progress-bar-pink" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
	                                                <span class="sr-only">48% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress progress-bar-purple-alt">
	                                            <div class="progress-bar progress-bar-purple" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width: 82%;">
	                                                <span class="sr-only">82% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress m-b-5 progress-bar-inverse-alt">
	                                            <div class="progress-bar progress-bar-inverse" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
	                                                <span class="sr-only">95% Complete</span>
	                                            </div>
	                                        </div>

                                        </div><!-- end col -->

                                    </div>
                                    <!-- end row -->

                                    <div class="row">
                                        <div class="col-md-5">
                                            <h5 class="m-t-40">Examples</h5>

                                            <div class="progress">
	                                            <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
	                                                <span class="sr-only">60% Complete</span>
	                                            </div>
	                                        </div>

                                            <div class="progress">
	                                            <div class="progress-bar progress-bar-pink progress-bar-striped active" role="progressbar" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
	                                                <span class="sr-only">48% Complete</span>
	                                            </div>
	                                        </div>

                                            <div class="progress progress-sm">
	                                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100" style="width: 89%;">
	                                                <span class="sr-only">89% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress">
	                                            <div class="progress-bar progress-bar-inverse" role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="width: 77%;">
	                                                <span class="sr-only">77% Complete</span>
	                                            </div>
	                                        </div>

                                        </div><!-- end col -->


                                        <div class="col-md-5 col-md-offset-1">
                                            <h5 class="m-t-40">&nbsp;</h5>

	                                        <div class="progress progress-md">
	                                            <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;">
	                                                <span class="sr-only">45% Complete</span>
	                                            </div>
	                                        </div>
	                                        <div class="progress progress-lg">
	                                            <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="67" aria-valuemin="0" aria-valuemax="100" style="width: 67%;">
	                                                <span class="sr-only">67% Complete</span>
	                                            </div>
	                                        </div>

                                            <div class="progress progress-md">
	                                            <div class="progress-bar progress-bar-pink" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">
	                                                85%
	                                            </div>
	                                        </div>

                                            <div class="progress">
	                                            <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 20%;" class="progress-bar progress-bar-success progress-bar-striped"></div>
	                                            <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;" class="progress-bar progress-bar-info"></div>
	                                            <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 15%;" class="progress-bar progress-bar-warning progress-bar-striped active"></div>
	                                            <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;" class="progress-bar progress-bar-danger progress-bar-striped active"></div>
	                                        </div>

                                        </div><!-- end col -->s
                                    </div><!-- end row -->

                                </div>
                            </div><!-- end col -->
                        </div>
                        <!-- end row -->


                        <div class="row">
                        	<div class="col-sm-12">
                        		<div class="card-box">
                        			<div class="row">
                        				<!-- Popovers -->
                        				<div class="col-md-6">
                        					<h4 class="m-t-0 header-title"><b>Popovers</b></h4>
                        					<p class="text-muted m-b-30 font-13">
												Add small overlays of content, like those on the iPad, to any element for housing secondary information.
											</p>

											<div class="button-list">
												<button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
													Popover on top
												</button>

												<button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="bottom" data-content="Vivamus
												sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
													Popover on bottom
												</button>

												<button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="">
													Popover on right
												</button>

												<button type="button" class="btn btn-default" data-container="body" title="" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="Popover title">
													Popover on left
												</button>

												<button tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">
													Dismissible popover
												</button>
											</div>
                        				</div>
                        				<!-- end col -->


                        				<!-- Tooltips -->
                        				<div class="col-md-6">
                        					<h4 class="m-t-0 header-title"><b>Tooltips</b></h4>
                        					<p class="text-muted m-b-30 font-13">
												Four options are available: top, right, bottom, and left aligned.
											</p>

											<div class="button-list">
												<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

                                            	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>

                                            	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on bottom">Tooltip on bottom</button>

                                            	<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip on right">Tooltip on right</button>
											</div>
                        				</div>
                        				<!-- end col -->

                        			</div> <!-- end row -->
                        		</div> <!-- end card-box -->
                        	</div> <!-- end col -->
                        </div>
                        <!-- end row -->


                        <div class="row">
                        	<div class="col-sm-12">
                        		<div class="card-box">
                        			<div class="row">

                        				<!-- Labels -->
                        				<div class="col-md-6">
                        					<h4 class="m-t-0 header-title"><b>Labels</b></h4>
                        					<p class="text-muted m-b-30 font-13">
												Add any of the default mentioned modifier classes to change the appearance of a label.
											</p>

											<div class="">
												<span class="label label-default">Default</span>
	                                            <span class="label label-primary">Primary</span>
	                                            <span class="label label-success">Success</span>
	                                            <span class="label label-info">Info</span>
	                                            <span class="label label-warning">Warning</span>
	                                            <span class="label label-danger">Danger</span>
	                                            <span class="label label-purple">Purple</span>
	                                            <span class="label label-inverse">Inverse</span>
	                                            <span class="label label-pink">Pink</span>
											</div>
                        				</div>
                        				<!-- end col -->

                        				<!-- Badge -->
                        				<div class="col-md-6">
                        					<h4 class="m-t-0 header-title"><b>Badge</b></h4>
                        					<p class="text-muted m-b-30 font-13">
												Four options are available: top, right, bottom, and left aligned.
											</p>

											<div class="">
												<span class="badge badge-primary">15</span>
												<span class="badge badge-success">0</span>
												<span class="badge badge-info">21</span>
												<span class="badge badge-inverse">3</span>
												<span class="badge badge-warning">35</span>
												<span class="badge badge-danger">32</span>
												<span class="badge badge-purple">51</span>
												<span class="badge badge-pink">77</span>
												<span class="badge">9</span>
											</div>
                        				</div>
                        				<!-- end col -->

                        			</div> <!-- end row -->
                        		</div> <!-- end card-box -->
                        	</div> <!-- end col -->
                        </div>
                        <!-- end row -->



                        <div class="row">
                        	<div class="col-sm-12">
                        		<div class="card-box">
                        			<div class="row">

                        				<!-- Standard Alert -->
                        				<div class="col-md-6">
                        					<h4 class="m-t-0 header-title"><b>Standard Alert</b></h4>
                        					<p class="text-muted m-b-30 font-13 m-h-40">
												Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.
											</p>

											<div class="alert alert-success">
												<strong>Well done!</strong> You successfully read this important alert message.
											</div>
											<div class="alert alert-info">
												 <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
											</div>
											<div class="alert alert-warning">
												<strong>Warning!</strong> Better check yourself, you're not looking too good.
											</div>
											<div class="alert alert-danger">
												<strong>Oh snap!</strong> Change a few things up and try submitting again.
											</div>

											<div class="alert alert-success fade in m-b-0">
												<h4>Big one!</h4>
												<p>
													Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
												</p>
												<p class="m-t-10">
													<button type="button" class="btn btn-success waves-effect waves-light">
														Wanna do this
													</button>
													<button type="button" class="btn btn-default waves-effect">
														Or do this
													</button>
												</p>
											</div>

                        				</div>
                        				<!-- end col -Standard Alert -->

                        				<div class="col-md-6">
                        					<h4 class="m-t-0 header-title"><b>Dismissable Alert</b></h4>
                        					<p class="text-muted m-b-30 font-13 m-h-40">
												Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.
											</p>

											<div class="alert alert-success alert-dismissable">
	                                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
	                                        </div>
	                                        <div class="alert alert-info alert-dismissable">
	                                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
	                                        </div>
	                                        <div class="alert alert-warning alert-dismissable">
	                                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
	                                        </div>
	                                        <div class="alert alert-danger alert-dismissable">
	                                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#" class="alert-link">Alert Link</a>.
	                                        </div>

	                                        <div class="alert alert-info fade in m-b-0">
	                                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
	                                            <h4>Big one!</h4>
	                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
	                                            <p class="m-t-10">
	                                              <button type="button" class="btn btn-info waves-effect waves-light">Wanna do this</button>
	                                              <button type="button" class="btn btn-default waves-effect">Or do this</button>
	                                            </p>
	                                        </div>
                        				</div><!-- end col -->

                        			</div><!-- end row -->
                        		</div>
                        	</div><!-- end col -->
                        </div>
                        <!-- End row -->


                        <div class="row">
                        	<div class="col-sm-12">
                        		<div class="card-box">
                        			<div class="row">

                        				<!-- Pagination -->
                        				<div class="col-md-6">
                        					<h4 class="m-t-0 header-title"><b>Pagination</b></h4>
                        					<p class="text-muted m-b-30 font-13">
												Provide pagination links for your site or app with the multi-page pagination component.
											</p>

											<div>
												<h5 class="m-b-5"><b>Default Pagination</b></h5>
												<p class="text-muted font-13">
													Simple pagination inspired by Rdio, great for apps and search results.
												</p>
												<ul class="pagination">
													<li class="disabled">
														<a href="#"><i class="fa fa-angle-left"></i></a>
													</li>
													<li>
														<a href="#">1</a>
													</li>
													<li class="active">
														<a href="#">2</a>
													</li>
													<li>
														<a href="#">3</a>
													</li>
													<li>
														<a href="#">4</a>
													</li>
													<li>
														<a href="#">5</a>
													</li>
													<li>
														<a href="#"><i class="fa fa-angle-right"></i></a>
													</li>
												</ul>

												<div class="m-b-5"></div>

												<h5 class="m-b-5"><b>Split Pagination</b></h5>
												<p class="text-muted font-13">
													Links are split to each other by adding a class of <code>
														.pagination-split</code>
												</p>
												<ul class="pagination pagination-split">
													<li class="disabled">
														<a href="#"><i class="fa fa-angle-left"></i></a>
													</li>
													<li>
														<a href="#">1</a>
													</li>
													<li class="active">
														<a href="#">2</a>
													</li>
													<li>
														<a href="#">3</a>
													</li>
													<li>
														<a href="#">4</a>
													</li>
													<li>
														<a href="#">5</a>
													</li>
													<li>
														<a href="#"><i class="fa fa-angle-right"></i></a>
													</li>
												</ul>

												<div class="m-b-5"></div>

												<h5 class="m-b-5"><b>Sizing</b></h5>
												<p class="text-muted font-13">
													Add <code>
														.pagination-lg</code>
													or <code>
														.pagination-sm</code>
													for additional sizes.
												</p>
												<ul class="pagination pagination-lg m-b-0">
													<li class="disabled">
														<a href="#"><i class="fa fa-angle-left"></i></a>
													</li>
													<li>
														<a href="#">1</a>
													</li>
													<li class="active">
														<a href="#">2</a>
													</li>
													<li>
														<a href="#">3</a>
													</li>
													<li>
														<a href="#">4</a>
													</li>
													<li>
														<a href="#">5</a>
													</li>
													<li>
														<a href="#"><i class="fa fa-angle-right"></i></a>
													</li>
												</ul>

											</div>
                        				</div>
                        				<!-- end col -->

                        				<!-- Pagers -->
                        				<div class="col-md-6">
                        					<h4 class="m-t-0 header-title"><b>Pagers</b></h4>
                        					<p class="text-muted m-b-30 font-13">
												Quick previous and next links for simple pagination implementations with light markup and styles.
											</p>

											<div>
												<h5 class="m-b-5"><b>Default</b></h5>
												<p class="text-muted font-13">
													By default, the pager centers links.
												</p>
												<ul class="pager">
													<li>
														<a href="#"><i class="fa fa-angle-left"></i> Previous</a>
													</li>
													<li>
														<a href="#">Next <i class="fa fa-angle-right"></i></a>
													</li>
												</ul>

												<div class="clearfix m-b-20"></div>

												<h5 class="m-b-5"><b>Aligned Links</b></h5>
												<p class="text-muted font-13">
													Alternatively, you can align each link to the sides:
												</p>
												<ul class="pager">
													<li class="previous">
														<a href="#">← Older</a>
													</li>
													<li class="next">
														<a href="#">Newer →</a>
													</li>
												</ul>

												<div class="clearfix m-b-20"></div>

												<h5 class="m-b-5">Optional Disabled State</h5>
												<p class="text-muted font-13">
													Pager links also use the general <code>
														.disabled</code>
													utility class from the pagination.
												</p>
												<ul class="pager">
													<li class="previous disabled">
														<a href="#">← Older</a>
													</li>
													<li class="next">
														<a href="#">Newer →</a>
													</li>
												</ul>

											</div>
                        				</div>
                        				<!-- end col -->


                        			</div>
                        		</div>
                        	</div>
                        </div>
                        <!-- End row -->


                        <!-- List Groups -->
                        <div class="row">
                            <div class="col-md-12">
                            	<div class="card-box">
                            		<div class="row">
                            			<div class="col-md-6">
                                            <h4 class="header-title m-t-0 m-b-30">List Groups(Simple List Group)</h4>

											<ul class="list-group">
                                                <li class="list-group-item">
                                                    <span class="badge badge-primary">14</span>
                                                    Cras justo odio
                                                </li>
                                                <li class="list-group-item">
                                                    <span class="badge badge-purple">2</span>
                                                    Dapibus ac facilisis in
                                                </li>
                                                <li class="list-group-item">
                                                    <span class="badge badge-pink">9</span>
                                                    Morbi leo risus
                                                </li>
                                                <li class="list-group-item">
                                                    <span class="badge badge-inverse">7</span>
                                                    Morbi leo risus
                                                </li>
                                                <li class="list-group-item">
                                                    <span class="badge badge-success">1</span>
                                                    Morbi leo risus
                                                </li>
                                            </ul>
                            			</div>
                            			<!-- end col -->

                            			<div class="col-md-6">
                                            <h4 class="header-title m-t-0 m-b-30">List Group with Links</h4>

											<div class="list-group">
                                                <a href="#" class="list-group-item active">
                                                    Cras justo odio
                                                </a>
                                                <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
                                                <a href="#" class="list-group-item">Morbi leo risus</a>
                                                <a href="#" class="list-group-item disabled">Porta ac consectetur ac</a>
                                                <a href="#" class="list-group-item">Vestibulum at eros</a>
                                            </div> <!-- list-group -->
                            			</div>
                            			<!-- end col -->

                            		</div>
                            		<!-- end row -->
                            	</div> <!-- end card-box -->
                            </div> <!-- end col -->
                        </div>
                        <!-- end Row -->



                        <!-- List Group with Description -->
                        <div class="row">
                            <div class="col-sm-12">
                            	<div class="card-box">
                                    <div class="dropdown pull-right">
                                        <a href="#" class="dropdown-toggle card-drop" data-toggle="dropdown" aria-expanded="false">
                                            <i class="zmdi zmdi-more-vert"></i>
                                        </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>

                        			<h4 class="header-title m-t-0 m-b-30">List Group with Description</h4>


									<div class="list-group m-b-0">
                                        <a href="#" class="list-group-item active">
                                            <h4 class="list-group-item-heading">Domestic confined any but son</h4>
                                            <p class="list-group-item-text">Consider speaking me prospect whatever if. Ten nearer rather hunted six parish indeed number. Allowance repulsive sex may contained can set suspected abilities cordially. Do part am he high rest that. So fruit to ready it being views match. </p>
                                        </a>
                                        <a href="#" class="list-group-item disabled">
                                            <h4 class="list-group-item-heading">Why painful the sixteen how minuter</h4>
                                            <p class="list-group-item-text">Started his hearted any civilly. So me by marianne admitted speaking. Men bred fine call ask. Cease one miles truth day above seven. Suspicion sportsmen provision suffering mrs saw engrossed something. Snug soon he on plan in be dine some. </p>
                                        </a>
                                        <a href="#" class="list-group-item">
                                            <h4 class="list-group-item-heading">Barton waited twenty always repair</h4>
                                            <p class="list-group-item-text">Talking chamber as shewing an it minutes. Trees fully of blind do. Exquisite favourite at do extensive listening. Improve up musical welcome he. Gay attended vicinity prepared now diverted. Esteems it ye sending reached as. Longer lively her design settle tastes advice mrs off who. </p>
                                        </a>
                                    </div> <!-- list-group -->
                            	</div>
                            </div><!-- end col -->
                        </div>
                        <!-- End row -->


                    </div> <!-- container -->

                </div> <!-- content -->

                <footer class="footer">
                    2016 - 2017 © Adminto.
                </footer>

            </div>


            <!-- ============================================================== -->
            <!-- End Right content here -->
            <!-- ============================================================== -->


            <!-- Right Sidebar -->
            <div class="side-bar right-bar">
                <a href="javascript:void(0);" class="right-bar-toggle">
                    <i class="zmdi zmdi-close-circle-o"></i>
                </a>
                <h4 class="">Notifications</h4>
                <div class="notification-list nicescroll">
                    <ul class="list-group list-no-border user-list">
                        <li class="list-group-item">
                            <a href="#" class="user-list-item">
                                <div class="avatar">
                                    <img src="assets/images/users/avatar-2.jpg" alt="">
                                </div>
                                <div class="user-desc">
                                    <span class="name">Michael Zenaty</span>
                                    <span class="desc">There are new settings available</span>
                                    <span class="time">2 hours ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="list-group-item">
                            <a href="#" class="user-list-item">
                                <div class="icon bg-info">
                                    <i class="zmdi zmdi-account"></i>
                                </div>
                                <div class="user-desc">
                                    <span class="name">New Signup</span>
                                    <span class="desc">There are new settings available</span>
                                    <span class="time">5 hours ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="list-group-item">
                            <a href="#" class="user-list-item">
                                <div class="icon bg-pink">
                                    <i class="zmdi zmdi-comment"></i>
                                </div>
                                <div class="user-desc">
                                    <span class="name">New Message received</span>
                                    <span class="desc">There are new settings available</span>
                                    <span class="time">1 day ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="list-group-item active">
                            <a href="#" class="user-list-item">
                                <div class="avatar">
                                    <img src="assets/images/users/avatar-3.jpg" alt="">
                                </div>
                                <div class="user-desc">
                                    <span class="name">James Anderson</span>
                                    <span class="desc">There are new settings available</span>
                                    <span class="time">2 days ago</span>
                                </div>
                            </a>
                        </li>
                        <li class="list-group-item active">
                            <a href="#" class="user-list-item">
                                <div class="icon bg-warning">
                                    <i class="zmdi zmdi-settings"></i>
                                </div>
                                <div class="user-desc">
                                    <span class="name">Settings</span>
                                    <span class="desc">There are new settings available</span>
                                    <span class="time">1 day ago</span>
                                </div>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
            <!-- /Right-bar -->

        </div>
        <!-- END wrapper -->



        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>

        <!-- App js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

    </body>
</html>